<template>
  <div class="ym-maker-fields" >
    <draggable
      :list="fields"
      v-bind="drag"
      @add="handleAddField"
      tag="el-row"
      :gutter="20"
      animation="1000"
    >
      <el-col
        v-for="(field, index) in fields"
        :key="field.__index__"
        :span="field.col || 24"
      >
        <ym-maker-fields v-model="field.fields" :drag="drag" v-if="isGroup(field.widget)"></ym-maker-fields>
        <div v-else @click="clickConfig(index)"><ym-form-field v-bind="field" /></div>
      </el-col>
    </draggable>
    <ym-maker-config :value="f" @input="onConfig" :visible.sync="open"/>
  </div>

</template>

<script>
import YmFormField from "@/ym/components/form/YmFormField"
import Draggable from 'vuedraggable'
import Util from "@/util"
import YmMakerConfig from "@/ym/maker/YmMakerConfig"
import { GROUP_FIELD } from "@/store/form";
export default {
  name: 'YmMakerFields',
  data () {
    return {
      open: false,
      index: -1
    }
  },
  computed: {
    fields: {
      get () {
        return this.value
      },
      set (fs) {
        this.$emit('input', fs)
      }
    },
    f () {
      return this.fields[this.index]
    }
  },
  props: {
    value: {
      type: Array,
      default: () => []
    },
    drag: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    clickConfig (index) {
      this.index = index
      this.open = true
    },
    onConfig (v) {
      this.$set(this.fields, this.index, v)
    },
    handleAddField (event) {
      const { newIndex } = event
      const field = this.fields[newIndex]
      const newField = {
        ...field,
        __index__: Util.uuid()
      }
      delete newField.icon
      this.$set(this.fields, newIndex, newField)
    },
    onClose() {
      this.open = false
    },
    isGroup(w) {
      return w === GROUP_FIELD
    }
  },
  components: {
    YmFormField,
    Draggable,
    YmMakerConfig
  }
}
</script>

<!--suppress CssUnusedSymbol -->
<style scoped>
/**
 拖拽幽灵
 */
/*.ghost {*/
/*  border: #a71d5d 1px dashed;*/
/*}*/

.ym-maker-fields {
  padding: 20px;
  border: #55a532 solid 1px;
  height: 80%;
  width: 80%;
}

.ym-maker-fields .el-form-item {
  border: #0086b3 dashed 1px;
}

.ym-maker-fields .el-col {
  min-height: 15px;
  padding: 5px;
}
</style>
